<template>
<view style="padding: 50rpx;">
			<view style="height: 150rpx;"></view>
			<!--
			如果直接使用html的图片标签，则是img
			image组件是uniapp自带的一个组件
			mode属性是指模式：
				widthFix 根据宽度自适应
			-->
			<image
			mode="widthFix"
			class="logo" 
			:src="mode.isDayTime?'/static/logo.png':'/static/logo_moon.png'"></image>
			
			<view style="height: 40rpx;"></view>
			<u-search
			:focus="true"
			 v-model="mode.searchKeyword"
			 :action-style="{
				 'fontSize':'0rpx',
				 'width':'0rpx'
			 }"
			 :color="mode.isDayTime?'#8a8a8a':'#f0f0f0'"
			 :search-icon-color="'rgb(154, 160, 166)'"
			 :bg-color="'rgba(0,0,0,0)'"
			 :border-color="'#dadce0'"
			 input-align="center" 
			 height="80">
			</u-search>
			
			<view style="height: 60rpx;"></view>
			
<!-- 			<u-button
				:custom-style="{
					'width':'120px',
					'fontSize':'20rpx',
					'color':mode.isDayTime?'#f0f0f0':'#8a8a8a'
				}"
				:ripple="true"
				:ripple-bg-color="mode.isDayTime?'rgba(255,255,255,.5)':'rgba(0,0,0,.5)'"
				shape="circle"
				
				:type="mode.isDayTime?'primary':'info'">
				点击搜索
			</u-button> -->
		</view>
</template>

<script>
	export default {
		name:"BigSearchBox",
		props:["mode"],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
	.logo {
		/* 1rpx 是 页面宽度的 1/750 */
		width: 450rpx;
		margin-left: 50%;
		transform: translate(-50%);
	}
</style>
